import "./style.scss";
import "../../comm.scss";
import React,{ Component } from 'react';
import Cesium from "cesium/Cesium";
import { Button } from 'antd';
import { connect } from "react-redux";

class Moved extends Component {
    encircle(){
        const {viewer} = this.props;
        viewer.dataSources.removeAll();
        viewer.dataSources.add(Cesium.CzmlDataSource.load('https://cesiumjs.org/Cesium/Apps/SampleData/simple.czml'));
        viewer.camera.flyHome(0);
    }
    move(){
        const {viewer} = this.props;
        viewer.dataSources.removeAll();
        viewer.dataSources.add(Cesium.CzmlDataSource.load('https://cesiumjs.org/Cesium/Apps/SampleData/Vehicle.czml'));

        viewer.scene.camera.setView({
            destination:  Cesium.Cartesian3.fromDegrees(-116.52, 35.02, 95000),
            orientation: {
                heading: 6
            }
        });
    }
    render(){
        return (
            <div className="btn">
                <Button onClick={this.encircle.bind(this)}>环绕</Button>
                <Button onClick={this.move.bind(this)}>移动</Button>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    viewer : state.App.viewer
});

export default connect(mapStateToProps,{})(Moved);